<template>
<div id="edit">
  <mu-tabs class="tab" :value.sync="currentType" color="secondary" inverse full-width>
    <mu-tab v-for="(item,i) in tabList" :key="i" @click="select(item)">{{item.name}}</mu-tab>
  </mu-tabs>
  <mu-container fuild style="overflow: hidden;">
    <mu-paper class="edit" :z-depth="5" round>
      <mu-breadcrumbs>
        <mu-breadcrumbs-item v-for="item in linkList" :key="item.text" :disabled="item.disabled">{{item.text}}</mu-breadcrumbs-item>
      </mu-breadcrumbs>
      <template v-if="currentType === 0">
        心情
      </template>
      <template v-if="currentType === 1">
      日记
      </template>
      <template v-if="currentType === 2">
      情书
      </template>
    </mu-paper>
  </mu-container>
</div>
</template>

<script>
import Vue from 'vue'
import {
  Grid,
  Tabs,
  Paper,
  Breadcrumbs
} from 'muse-ui'
Vue.use(Grid).use(Tabs).use(Paper).use(Breadcrumbs)
export default {
  data () {
    return {
      currentType: 0,
      tabList: [
        {
          name: '心情',
          type: 0
        },
        {
          name: '日记',
          type: 1
        },
        {
          name: '情书',
          type: 2
        }
      ]
    }
  },
  computed: {
    linkList () {
      let arr = [
        {
          text: '首页',
          disabled: false
        },
        {
          text: '随笔',
          disabled: false
        },
        {
          text: this.tabList[this.currentType].name,
          disabled: true
        }
      ]
      return arr
    }
  },
  methods: {
    select (item) {
      this.currentType = item.type
    }
  }
}
</script>
<style lang="less">
#edit {
  width: 100%;
  .tab {
    position: fixed;
    top: 60px;
  }
}
.edit {
  width: 100%;
  min-height: 900px;
  margin: 60px 0 10px;
  background: #fff url(../assets/image/qq2.gif) no-repeat right top;
}
</style>
